<template>
  <div v-if="isShowPage" class="question-detail-root min-h-screen py-1 flex justify-center">
    <div class="flex gap-8 w-full max-w-6xl">
      <!-- 主体 -->
      <div class="flex-1 min-w-0">
        <!-- <el-skeleton :loading="loading" animated>
          <template #template>
            <div class="mb-4">
              <el-skeleton-item variant="p" style="width: 60%" />
              <el-skeleton-item variant="text" style="width: 40%" />
              <el-skeleton-item variant="text" style="width: 80%" />
            </div>
          </template>
          <template #default>
            <QuestionDetailHeader
              v-if="question"
              :question="question"
              :isFollowed="isFollowed"
              @toggleFollow="toggleFollow"
              @scrollToAnswerInput="scrollToAnswerInput"
              @showInviteDialog="showInviteDialog = true"
              @showShare="showShare"
            />
          </template>
        </el-skeleton> -->
        <!-- Loading骨架屏 -->
        <div v-if="loading" class="question-detail-skeleton">
          <div class="skeleton-card">
            <!-- 标签和状态区域 -->
            <div class="skeleton-header">
              <div class="skeleton-tags">
                <div class="skeleton-tag"></div>
                <div class="skeleton-tag"></div>
                <div class="skeleton-tag"></div>
              </div>
              <div class="skeleton-status">
                <div class="skeleton-status-tag"></div>
              </div>
            </div>
            
            <!-- 标题 -->
            <div class="skeleton-title">
              <div class="skeleton-title-line"></div>
              <div class="skeleton-title-line"></div>
            </div>
            
            <!-- 内容 -->
            <div class="skeleton-content">
              <div class="skeleton-content-line"></div>
              <div class="skeleton-content-line"></div>
              <div class="skeleton-content-line"></div>
              <div class="skeleton-content-line" style="width: 70%;"></div>
            </div>
            
            <!-- 操作按钮区域 -->
            <div class="skeleton-actions">
              <div class="skeleton-buttons">
                <div class="skeleton-button"></div>
                <div class="skeleton-button"></div>
                <div class="skeleton-button"></div>
              </div>
              <div class="skeleton-stats">
                <div class="skeleton-stat"></div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 实际内容 -->
        <QuestionDetailHeader
          v-else-if="question"
          :question="question"
          :show-invite-buttons="isInviteMode"
          :selected-expert="isInviteMode ? myInvitedExperts[0] : null"
          @scrollToAnswerInput="scrollToAnswerInput"
          @showInviteDialog="showInviteDialog = true"
          @showShare="showShare"
          @refresh="fetchQuestionDetail"
        />
        <MyInvitePanel v-if="isQuestionAuthor && question && question.status == 0" :question="question" class="mb-6" />
        <!-- <MyInvitePanel v-if="route.query.tab == 'my'" :question="question" class="mb-6" /> -->
        <!-- <MyInvitePanel v-if="!isInviteMode && isQuestionAuthor && question.status === 0" :question="question" class="mb-6" /> -->

        <!-- <QuestionDetailInvitePanel
          :inviteSearch="inviteSearch"
          :displayedInviteUsers="displayedInviteUsers"
          :filteredInviteUsers="filteredInviteUsers"
          :showAllInvite="showAllInvite"
          @update:inviteSearch="val => inviteSearch.value = val"
          @inviteUser="inviteUser"
          @toggleShowAll="() => showAllInvite.value = !showAllInvite.value"
        />
        <MyInvitePanel v-if="!isInviteMode" :experts="myInvitedExperts" class="mb-6" /> -->
        <QuestionDetailAnswers
          ref="answersRef"
          :answers="answers"
          :total="total"
          :current-page="currentPage"
          :page-size="pageSize"
          :question-id="id"
          :question-author-id="question?.uid"
          :question-status="question?.status"
          :commentExpandedId="commentExpandedId"
          :mainCommentInput="mainCommentInput"
          :mainCommentLoading="mainCommentLoading"
          @update:currentPage="val => currentPage = val"
          @update:pageSize="val => pageSize = val"
          @refresh="fetchAnswerList"
          @refreshQuestionDetail="fetchQuestionDetail"
          @submitAnswer="handleSubmitAnswer"
          @like="handleLike"
          @favorite="handleFavorite"
          @love="handleLove"
          @share="handleShare"
          @toggleComments="toggleComments"
          @likeComment="handleLikeComment"
          @likeReply="handleLikeReply"
          @replyComment="handleReplyComment"
          @replyReply="handleReplyReply"
          @openCommentDialog="openCommentDialog"
          @openReplyDialog="openReplyDialog"
        />
        <!-- <InviteUserDialog :visible="showInviteDialog" :users="inviteUsers" @close="showInviteDialog = false" /> -->
      </div>
      <!-- 右侧栏 -->
      <!-- <div class="w-[320px] flex-shrink-0 flex flex-col gap-6">
        <el-card class="rounded-2xl shadow p-4 related-questions-card">
          <div class="font-bold text-base mb-2">相关问题</div>
          <div class="flex flex-col gap-1">
            <div v-for="item in relatedQuestions" :key="item.id" class="related-question-item" @click="goDetail(item.id)">
              <el-tooltip :content="item.title" placement="top" effect="dark">
                <span class="related-question-title">{{ item.title }}</span>
              </el-tooltip>
            </div>
          </div>
        </el-card>
        <el-button type="primary" class="w-full h-12 text-lg rounded-full" @click="goAsk">我要提问</el-button>
      </div> -->
    </div>
    <ExpertCommentDialog
      :visible="commentDialogVisible"
      :user-avatar="'https://randomuser.me/api/portraits/lego/2.jpg'"
      :fetch-comments="fetchComments"
      @onClose="closeCommentDialog"
      @onLikeComment="(comment) => handleLikeComment(commentDialogItem, comment)"
      @onLikeReply="({comment, reply}) => handleLikeReply(commentDialogItem, comment, reply)"
      @onReplyComment="(content) => handleReplyComment(commentDialogItem, content)"
      @onReplyReply="({commentId, replyId, content}) => handleReplyReply(commentDialogItem, commentId, replyId, content)"
    />
    <ExpertReplyDialog
      :visible="replyDialogVisible"
      :comment="replyDialogComment"
      :replies="replyDialogReplies"
      @close="replyDialogVisible = false"
    />
   <QuestionDialog v-model:visible="showQuestionDialog" @success="handleQuestionSuccess" />

  </div>
  <div class="mt-64" v-else> 
    <div class="flex flex-col items-center justify-center">
      <img src="/src/assets/empty-expert.svg" class="w-24 h-24 text-gray-400" alt="禁用图片" />
      <p class="mt-4 text-gray-500 text-lg">暂无数据</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, nextTick, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { mockQuestions } from './mockQuestions'
import { myInvitedExperts } from './mockQuestions'
import { getQuestionInfo, getAnswerList, postAnswerQuestion } from '@/axios/api/question'
import ExpertActions from '@/components/ExpertActions.vue'
import ExpertCommentPanel from '@/components/ExpertCommentPanel.vue'
import ExpertCommentInput from '@/components/ExpertCommentInput.vue'
import UserHoverCard from '@/components/UserHoverCard.vue'
import InviteUserDialog from './InviteUserDialog.vue'
import ExpertCommentDialog from '@/components/ExpertCommentDialog.vue'
import MyInvitePanel from './MyInvitePanel.vue'
import QuestionDetailHeader from './QuestionDetailHeader.vue'
import QuestionDetailInvitePanel from './QuestionDetailInvitePanel.vue'
import QuestionDetailAnswers from './QuestionDetailAnswers.vue'
import { ElMessage } from 'element-plus'
import { getUserInfo } from '@/utils/webStorage'
import QuestionDialog from '@/views/Submit/components/QuestionDialog.vue'

import { useGlobalStore } from '@/stores/globalStore'
const globalStore = useGlobalStore()

const showQuestionDialog = ref(false)
//头部按钮点击
watch(
  () => globalStore.isShowQuestionDialog,
  (val) => {
    if (val) {
      showQuestionDialog.value = true
    }
  }
)



const route = useRoute()
const router = useRouter()
let id = route.params.id 
const question = ref(null)
const loading = ref(false)
const answers = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

// 事件处理函数
const handleQuestionSuccess = () => {
  showQuestionDialog.value = false
  router.back()
}


// 返回列表页
const goBack = () => {
  router.push({
    path: '/question',
    query: {
      from: 'detail'  // 标记是从详情页返回
    }
  })
}

// 检查是否是邀请模式
const isInviteMode = computed(() => route.query.tab === 'invite')

const isQuestionAuthor = computed(() => {
  const userInfo = getUserInfo()
  return userInfo.uid === question.value?.uid
})

// 处理关注/取消关注
async function handleToggleFollow() {
  if (!question.value) return
  try {
    // TODO: 调用关注/取消关注的接口
    // const res = await toggleQuestionFollow(question.value.id)
    // if (res.code === 0) {
    //   question.value.isLiked = !question.value.isLiked
    // }
    
    // 临时模拟接口调用
    question.value.isLiked = !question.value.isLiked
  } catch (error) {
    console.error('操作失败:', error)
  }
}

const isShowPage = ref(true)

// 获取问题详情
async function fetchQuestionDetail() {
  try {
    loading.value = true
    const res = await getQuestionInfo(id)
    if (res && res.code === 0) {
      isShowPage.value = true
      question.value = res.data
      // 问题详情更新后，同时刷新回答列表
      await fetchAnswerList()
    } else if(res && res.code === 410) {
      isShowPage.value = false
    }
  } catch (error) {
    console.error('获取问题详情失败:', error)
    // ElMessage.error(error)
     if(error=='问题不存在'){
      router.back()
    }
  } finally {
    loading.value = false
  }
}


// 获取回答列表
async function fetchAnswerList() {
  try {
    const res = await getAnswerList({
      questionId: id,
      isBest: '',
      page: currentPage.value,
      limit: pageSize.value
    })
    if (res.code === 0) {
      answers.value = res.data.list
      total.value = res.data.totalCount
    }
  } catch (error) {
    console.error('获取回答列表失败:', error)
    ElMessage.error('获取回答列表失败')
  }
}

// 提交回答
async function handleSubmitAnswer(content) {
  if (!content.trim()) {
    ElMessage.warning('请输入回答内容')
    return
  }
  try {
    const res = await postAnswerQuestion({
      questionId: id,
      content: content
    })
    if (res.code === 0) {
      ElMessage.success('回答提交成功')
      // 刷新回答列表
      await fetchAnswerList()
    
    }
  } catch (error) {
    console.error('提交回答失败:', error)
    ElMessage.error('提交回答失败')
  }
}

// 在组件挂载时获取数据
onMounted(() => {
  fetchQuestionDetail()
})

// 监听路由变化，当路由参数变化时重新获取问题详情
watch(
  () => route.params.id,
  (newId, oldId) => {
    // if (newId && newId !== oldId) {
    //   // 更新id值
      // id.value = newId
      id = newId
    //   // 重新获取问题详情
      fetchQuestionDetail()
    // }
  },
  { immediate: false } // 组件挂载时已经调用过一次，这里不需要立即执行
)

// mock邀请答主
const showInviteDialog = ref(false)
const inviteSearch = ref('')
const inviteUsers = ref([
  { id: 1, name: '委托刘看山邀请', avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=11', desc: '开启后为你智能邀请潜在的回答者', invited: false },
  { id: 2, name: '天地一刀斩', avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=12', desc: 'TA 已帮助 70 人获得解答', invited: false },
  { id: 3, name: '悟道', avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=13', desc: '可能对该问题感兴趣', invited: false },
  { id: 4, name: '那般妖娆', avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=14', desc: 'TA 已帮助 182 人获得解答', invited: false },
  { id: 5, name: '渡月桥', avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=15', desc: 'TA 已帮助 52 人获得解答', invited: false },
  { id: 6, name: '花落花飞', avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=16', desc: 'TA 已帮助 25 人获得解答', invited: false },
  { id: 7, name: 'Gordon', avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=17', desc: '可能对该问题感兴趣', invited: false },
  { id: 8, name: '阿蒙', avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=18', desc: '可能对该问题感兴趣', invited: false },
  { id: 9, name: 'David', avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=19', desc: 'TA 已帮助 112 人获得解答', invited: false },
  { id: 10, name: '冠达', avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=20', desc: 'TA 已帮助 102 人获得解答', invited: false },
  { id: 11, name: '北鸟', avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=21', desc: '可能对该问题感兴趣', invited: false },
])
const showAllInvite = ref(false)
const filteredInviteUsers = computed(() => {
  if (!inviteSearch.value.trim()) return inviteUsers.value
  const kw = inviteSearch.value.trim().toLowerCase()
  return inviteUsers.value.filter(u => u.name.toLowerCase().includes(kw) || (u.desc && u.desc.toLowerCase().includes(kw)))
})
const displayedInviteUsers = computed(() => {
  if (showAllInvite.value) return filteredInviteUsers.value
  return filteredInviteUsers.value.slice(0, 5)
})
function inviteUser(user) {
  user.invited = true
}

// mock丰富回答数据（结构参考ExpertTabList.vue reply类型）
function randomName() {
  const names = ['小虎牙', '知乎用户Gt3Csp', '朵兰朵朵', '活着心叛跳', '知乎用户bUxECn', '大洋游侠', '爱一个人需要理由吗', '来日方长', '小明', '小红', '小刚', '小美', '小李', '小王', '小张', '小赵', '小钱', '小孙', '小周', '小吴', '小郑', '小冯', '小陈', '小褚', '小卫'];
  return names[Math.floor(Math.random() * names.length)];
}
function randomContent() {
  const arr = [
    '收藏从未停止，行动从未开始', '瞬间没意思了😅', '我的收藏夹还特意分了20几个类别。😱😱😱', '下次一定行动 下次一定', '喜欢~', '一直这样', '绝了', '哈哈', '加油', '支持', '有道理', '同感', '赞同', '学习了', '受教了', '有收获', '很棒', '感谢分享', '写得真好', '有帮助', '顶', '路过', '围观', '关注了', '收藏了', '太真实了', '笑死', '泪目', '点赞', '回复一下', '再来一条', '补充一下', '补充回复', '有意思', '有趣', '有深度', '有见地', '有启发', '有共鸣', '有故事', '有温度', '有态度', '有观点', '有想法', '有追求', '有梦想', '有目标', '有方向', '有动力', '有信仰', '有情怀', '有担当', '有责任', '有勇气', '有毅力', '有恒心', '有耐心', '有信心', '有爱心', '有同理心', '有包容心', '有感恩心', '有进取心', '有好奇心', '有求知欲', '有探索欲', '有创造力', '有想象力', '有执行力', '有判断力', '有决策力', '有领导力', '有组织力', '有协调力', '有沟通力', '有表达力', '有说服力', '有影响力', '有号召力', '有凝聚力', '有亲和力', '有吸引力', '有魅力', '有气质', '有风度', '有修养', '有品位', '有格调', '有品格', '有品行', '有品性', '有品德', '有品貌', '有品学', '有品艺', '有品味', '有品评', '有品鉴', '有品赏', '有品尝', '有品读', '有品评', '有品鉴', '有品赏', '有品尝', '有品读',
  ];
  return arr[Math.floor(Math.random() * arr.length)];
}
function randomRegion() {
  const arr = ['北京', '上海', '广州', '深圳', '杭州', '南京', '济南', '青岛', '成都', '重庆', '武汉', '西安', '苏州', '天津', '郑州', '长沙', '合肥', '福州', '厦门', '南昌'];
  return arr[Math.floor(Math.random() * arr.length)];
}
function randomDate() {
  const start = new Date(2023, 0, 1).getTime();
  const end = new Date(2024, 5, 1).getTime();
  return new Date(start + Math.random() * (end - start)).toISOString().slice(0, 10);
}
function randomAvatar() {
  return `https://api.dicebear.com/7.x/miniavs/svg?seed=${Math.floor(Math.random()*1000)}`;
}
function genMockReplies(n, parentAuthor) {
  const replies = [];
  let lastAuthor = parentAuthor;
  for (let i = 0; i < n; i++) {
    const author = randomName();
    replies.push({
      id: Date.now() + Math.random(),
      author,
      uid: Math.floor(Math.random()*1000),
      avatar: randomAvatar(),
      content: randomContent(),
      time: randomDate(),
      region: randomRegion(),
      isAuthor: false,
      likeCount: Math.floor(Math.random()*10),
      liked: false,
      replyTo: lastAuthor,
    });
    lastAuthor = author;
  }
  return replies;
}
function genMockComments(n) {
  const comments = [];
  let lastAuthor = null;
  for (let i = 0; i < n; i++) {
    const author = randomName();
    comments.push({
      id: Date.now() + Math.random(),
      author,
      uid: Math.floor(Math.random()*1000),
      avatar: randomAvatar(),
      content: randomContent(),
      time: randomDate(),
      region: randomRegion(),
      isAuthor: i === 0,
      likeCount: Math.floor(Math.random()*20),
      liked: false,
      replyTo: i === 0 ? '' : lastAuthor,
      replies: genMockReplies(Math.floor(Math.random()*3+1), author)
    });
    lastAuthor = author;
  }
  return comments;
}
const commentExpandedId = ref(null)
const mainCommentInput = ref('')
const mainCommentLoading = ref(false)

function handleLike(item) {
  item.liked = !item.liked
  item.likeCount += item.liked ? 1 : -1
}
function handleFavorite(item) {
  item.favorited = !item.favorited
}
function handleLove(item) {
  item.loved = !item.loved
}
function handleShare(item) {
  const currentUrl = window.location.href
  if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
    navigator.clipboard.writeText(currentUrl)
      .then(() => {
        ElMessage.success('链接已复制到剪贴板')
      })
      .catch(() => {
        fallbackCopyTextToClipboard(currentUrl)
      })
  } else {
    fallbackCopyTextToClipboard(currentUrl)
  }
}

function fallbackCopyTextToClipboard(text) {
  const input = document.createElement('input')
  input.value = text
  document.body.appendChild(input)
  input.select()
  try {
    document.execCommand('copy')
    ElMessage.success('链接已复制到剪贴板')
  } catch (err) {
    ElMessage.error('复制失败，请手动复制')
  }
  document.body.removeChild(input)
}
function showShare() {
  handleShare()
}
function toggleComments(item) {
  commentExpandedId.value = commentExpandedId.value === item.id ? null : item.id
}
function handleLikeComment(item, comment) {
  comment.liked = !comment.liked
  comment.likeCount = (comment.likeCount || 0) + (comment.liked ? 1 : -1)
}
function handleLikeReply(item, comment, reply) {
  reply.liked = !reply.liked
  reply.likeCount = (reply.likeCount || 0) + (reply.liked ? 1 : -1)
}
async function handleReplyComment(item, content) {
  if (!content.trim()) return
  mainCommentLoading.value = true
  await new Promise(r => setTimeout(r, 300))
  item.comments.unshift({
    id: Date.now(),
    author: '你',
    avatar: 'https://randomuser.me/api/portraits/lego/2.jpg',
    content,
    time: '刚刚',
    region: '本地',
    isAuthor: false,
    likeCount: 0,
    liked: false,
    replies: []
  })
  mainCommentInput.value = ''
  mainCommentLoading.value = false
}
function handleReplyReply(item, commentId, replyId, content) {
  const comment = item.comments.find(c => c.id === commentId)
  if (comment) {
    comment.replies.push({
      id: Date.now(),
      author: '你',
      avatar: 'https://randomuser.me/api/portraits/lego/2.jpg',
      content,
      time: '刚刚',
      region: '本地',
      isAuthor: false,
      likeCount: 0,
      liked: false
    })
  }
}

const newAnswer = ref('')
function submitAnswer() {
  if (!newAnswer.value.trim()) return
  answers.value.unshift({
    id: Date.now(),
    user: { name: '新用户', avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=22', followed: false },
    time: '刚刚',
    content: newAnswer.value,
    likes: 0,
    liked: false,
    comments: 0,
  })
  newAnswer.value = ''
  nextTick(() => {
    answerInputRef.value.scrollIntoView({ behavior: 'smooth' })
  })
}
const answerInputRef = ref(null)
function scrollToAnswerInput() {
  nextTick(() => {
    const answerInput = document.getElementById('answer-input-section')
    if (answerInput) {
      answerInput.scrollIntoView({ behavior: 'smooth' })
    }
  })
}
// function goDetail(qid) {
//   router.push({ path: `/question/${qid}` })
//   // 重新获取问题详情
//   if (qid !== id) {
//     fetchQuestionDetail()
//     fetchRelatedQuestions()
//   }
// }
function goAsk() {
  router.push({ path: '/question', query: { ask: 1 } })
}

const replyDialogVisible = ref(false)
const replyDialogReplies = ref([])
const replyDialogComment = ref(null)
function openReplyDialog(comment) {
  replyDialogComment.value = comment
  replyDialogReplies.value = comment?.replies || []
  replyDialogVisible.value = true
}

function handleOpenReplyDialog(comment, fetchReplies) {
  replyDialogComment.value = comment
  replyDialogReplies.value = fetchReplies
  replyDialogVisible.value = true
}

const commentDialogVisible = ref(false)
const commentDialogItem = ref(null)
function openCommentDialog(item) {
  commentDialogItem.value = item
  commentDialogVisible.value = true
}
function closeCommentDialog() {
  commentDialogVisible.value = false
}
// 异步分页加载评论
function fetchComments(page, pageSize) {
  return new Promise(resolve => {
    setTimeout(() => {
      const all = commentDialogItem.value?.comments || []
      const list = all.slice((page-1)*pageSize, page*pageSize)
      resolve({ list, total: all.length })
    }, 300)
  })
}


</script>

<style scoped>
.question-detail-root {
  /* background: #f6f8fa; */
  width: 100%;
  margin: 0 auto;
}
.flex {
  display: flex;
}
.gap-8 {
  gap: 2rem;
}
.w-full {
  width: 100%;
}
.max-w-6xl {
  max-width: 80rem;
}
.min-h-screen {
  min-height: 100vh;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.justify-center {
  justify-content: center;
}
.flex-1 {
  flex: 1 1 0%;
}
.min-w-0 {
  min-width: 0;
}
.w-\[320px\] {
  width: 320px;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.flex-col {
  flex-direction: column;
}
.gap-6 {
  gap: 1.5rem;
}
.related-questions-card {
  background: #fafdff;
  border-radius: 14px;
  box-shadow: 0 1px 4px 0 rgba(56,112,255,0.04);
  border: 1px solid #f0f1f3;
  padding: 18px 14px 12px 14px;
}
.related-question-item {
  background: transparent;
  border-radius: 7px;
  padding: 7px 6px 7px 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-size: 14px;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
}
.related-question-item:hover {
  background: #f0f6ff;
}
.related-question-item:hover .related-question-title {
  color: #2563eb;
  text-decoration: underline;
}
.related-question-title {
  color: #222;
  font-weight: 400;
  transition: color 0.15s, text-decoration 0.15s;
  display: inline-block;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 问题详情骨架屏样式 */
.question-detail-skeleton {
  margin-bottom: 16px;
}

.skeleton-card {
  background: #fff;
  border-radius: 13px;
  padding: 20px;
  box-shadow: 0 2px 10px 0 rgba(56,112,255,0.08);
  border: none;
}

.skeleton-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.skeleton-tags {
  display: flex;
  gap: 8px;
}

.skeleton-tag {
  width: 60px;
  height: 24px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  border-radius: 12px;
  animation: skeleton-loading 1.5s infinite;
}

.skeleton-status {
  display: flex;
  gap: 8px;
}

.skeleton-status-tag {
  width: 80px;
  height: 24px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  border-radius: 12px;
  animation: skeleton-loading 1.5s infinite;
}

.skeleton-title {
  margin-bottom: 16px;
}

.skeleton-title-line {
  height: 24px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skeleton-loading 1.5s infinite;
  margin-bottom: 8px;
}

.skeleton-title-line:first-child {
  width: 90%;
}

.skeleton-title-line:last-child {
  width: 60%;
}

.skeleton-content {
  margin-bottom: 20px;
}

.skeleton-content-line {
  height: 16px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skeleton-loading 1.5s infinite;
  margin-bottom: 12px;
}

.skeleton-content-line:first-child {
  width: 100%;
}

.skeleton-content-line:nth-child(2) {
  width: 95%;
}

.skeleton-content-line:nth-child(3) {
  width: 85%;
}

.skeleton-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.skeleton-buttons {
  display: flex;
  gap: 12px;
}

.skeleton-button {
  width: 80px;
  height: 32px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  border-radius: 16px;
  animation: skeleton-loading 1.5s infinite;
}

.skeleton-stats {
  display: flex;
  gap: 8px;
}

.skeleton-stat {
  width: 120px;
  height: 16px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .skeleton-card {
    padding: 16px;
  }
  
  .skeleton-tag {
    width: 50px;
    height: 20px;
  }
  
  .skeleton-status-tag {
    width: 60px;
    height: 20px;
  }
  
  .skeleton-title-line {
    height: 20px;
  }
  
  .skeleton-content-line {
    height: 14px;
  }
  
  .skeleton-button {
    width: 60px;
    height: 28px;
  }
  
  .skeleton-stat {
    width: 100px;
    height: 14px;
  }
}
</style>